<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="utf-8">

    

    <!-- 渲染优化 -->
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="HandheldFriendly" content="True" >
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!--icon-->

    
        <link rel="shortcut icon" href="https://s1.imgpp.com/2022/01/28/owl.png">
    
    
    
    
    


    <!-- meta -->


<title>vue2学习笔记 | 猫头鹰的BLOG</title>


    <meta name="keywords" content="vue, 指令, Vue2学习笔记, 猫头鹰的博客">




    <!-- OpenGraph -->
 
    <meta name="description" content="Vue2学习笔记特性 数据驱动视图(单项数据绑定) graph LR A[vue中的数据] --&gt;B[vue监测数据的变化]     B --&gt; C[页面结构] 双向数据绑定  页面中表单负责采集数据，ajax负责提交数据当表单提交时，vue会自动更新数据，通过数据驱动视图从而更新页面  graph LR A[页面表单数据提交] --&gt;B[vue更新数据]     B --&amp;gt">
<meta property="og:type" content="article">
<meta property="og:title" content="vue2学习笔记">
<meta property="og:url" content="http://example.com/2022/03/15/vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="猫头鹰的BLOG">
<meta property="og:description" content="Vue2学习笔记特性 数据驱动视图(单项数据绑定) graph LR A[vue中的数据] --&gt;B[vue监测数据的变化]     B --&gt; C[页面结构] 双向数据绑定  页面中表单负责采集数据，ajax负责提交数据当表单提交时，vue会自动更新数据，通过数据驱动视图从而更新页面  graph LR A[页面表单数据提交] --&gt;B[vue更新数据]     B --&amp;gt">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://images.pexels.com/photos/957002/berchtesgaden-alpine-watzmann-berchtesgaden-national-park-957002.jpeg?cs=srgb&dl=pexels-felix-mittermeier-957002.jpg&fm=jpg">
<meta property="article:published_time" content="2022-03-15T02:00:20.000Z">
<meta property="article:modified_time" content="2022-05-30T15:05:23.332Z">
<meta property="article:author" content="张程">
<meta property="article:tag" content="vue">
<meta property="article:tag" content="指令">
<meta property="article:tag" content="Vue2学习笔记">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://images.pexels.com/photos/957002/berchtesgaden-alpine-watzmann-berchtesgaden-national-park-957002.jpeg?cs=srgb&dl=pexels-felix-mittermeier-957002.jpg&fm=jpg">


    
<link rel="stylesheet" href="/css/style/main.css">
 

    
    
    
        <link rel="stylesheet" id="hl-default-theme" href="https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/arduino-light.min.css" media="none" >
        
            <link rel="stylesheet" id="hl-dark-theme" href="https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/obsidian.min.css" media="none">
        
    

    

    
    
<link rel="stylesheet" href="/css/style/dark.css">

    
<script src="/js/darkmode.js"></script>



     
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 

    <!-- custom head -->

<meta name="generator" content="Hexo 6.0.0"></head>

    <body>
        <div id="app">
            <header class="header">
    <div class="header__left">
        <a href="/" class="button">
            <span class="logo__text">猫头鹰</span>
        </a>
    </div>
    <div class="header__right">
        
            <div class="navbar__menus">
                
                    <a href="/" class="navbar-menu button">首页</a>
                
                    <a href="/tags/" class="navbar-menu button">标签</a>
                
                    <a href="/categories/" class="navbar-menu button">分类</a>
                
                    <a href="/archives/" class="navbar-menu button">归档</a>
                
            </div>
        
        
        
    <a href="/search/" id="btn-search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="32"><path d="M192 448c0-141.152 114.848-256 256-256s256 114.848 256 256-114.848 256-256 256-256-114.848-256-256z m710.624 409.376l-206.88-206.88A318.784 318.784 0 0 0 768 448c0-176.736-143.264-320-320-320S128 271.264 128 448s143.264 320 320 320a318.784 318.784 0 0 0 202.496-72.256l206.88 206.88 45.248-45.248z"></path></svg>
    </a>


        
        
    <a href="javaScript:void(0);" id="btn-toggle-dark">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
    </a>


        
            <a class="dropdown-icon button" id="btn-dropdown" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width='24' height='24' fill="none" stroke="currentColor" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M3.314,4.8h13.372c0.41,0,0.743-0.333,0.743-0.743c0-0.41-0.333-0.743-0.743-0.743H3.314c-0.41,0-0.743,0.333-0.743,0.743C2.571,4.467,2.904,4.8,3.314,4.8z M16.686,15.2H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,15.2,16.686,15.2z M16.686,9.257H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,9.257,16.686,9.257z"></path></svg></a>
            <div class="dropdown-menus" id="dropdown-menus">
                
                    <a href="/" class="dropdown-menu button">首页</a>
                
                    <a href="/tags/" class="dropdown-menu button">标签</a>
                
                    <a href="/categories/" class="dropdown-menu button">分类</a>
                
                    <a href="/archives/" class="dropdown-menu button">归档</a>
                
            </div>
        
    </div>
</header>


            <main class="main">
    

<div class="post-title">
    <h1 class="post-title__text">
        vue2学习笔记
    </h1>
    <div class="post-title__meta">
        <a href="/archives/2022/03/" class="post-meta__date button">2022-03-15</a>
        
    <span class="separate-dot"></span><a href="/categories/vue/" class="button">vue</a>

 
        
    
     
    <span id="busuanzi_container_page_pv" hidden>
        <span class="separate-dot"></span>
        <span></span>
        <span id="busuanzi_value_page_pv"></span>
        <span>次观看</span>
    </span>



 

 
    </div>
</div>



<article class="post content-card">
    <div class="post__header">
    
        <div class="post-thumbnail lazy" data-bg="https://images.pexels.com/photos/957002/berchtesgaden-alpine-watzmann-berchtesgaden-national-park-957002.jpeg?cs=srgb&amp;dl=pexels-felix-mittermeier-957002.jpg&amp;fm=jpg"></div>
    
</div>
    <div class="post__content">
        <h1 id="Vue2学习笔记"><a href="#Vue2学习笔记" class="headerlink" title="Vue2学习笔记"></a>Vue2学习笔记</h1><h2 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h2><ol>
<li><p>数据驱动视图(单项数据绑定)</p>
<pre><code class="hljs mermaid">graph LR
A[vue中的数据] --&gt;B[vue监测数据的变化]
    B --&gt; C[页面结构]</code></pre></li>
<li><p>双向数据绑定</p>
<blockquote>
<p>页面中表单负责采集数据，ajax负责提交数据<br>当表单提交时，vue会自动更新数据，通过数据驱动视图从而更新页面</p>
</blockquote>
<pre><code class="hljs mermaid">graph LR
A[页面表单数据提交] --&gt;B[vue更新数据]
    B --&gt; C[数据驱动视图]
    C --&gt; D[页面更新]</code></pre></li>
</ol>
<h2 id="MVVM"><a href="#MVVM" class="headerlink" title="MVVM"></a>MVVM</h2><blockquote>
<p>是vue特性的核心原理</p>
</blockquote>
<pre><code class="hljs mermaid">graph LR
A[View 视图] --&gt;B[ViewModel vue实例对象]
	B --&gt; A
    B --&gt; C[Model 数据源data]
    C --&gt; B</code></pre>
<p><img src="https://imgpp.com/s1/2022/03/21/image.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/03/21/image.png" srcset="" alt="示意图"></p>
<h4 id="Object-defineProperty-object，’key’-option"><a href="#Object-defineProperty-object，’key’-option" class="headerlink" title="Object.defineProperty(object，’key’,{option})"></a>Object.defineProperty(object，’key’,{option})</h4><ul>
<li>Object构造器对象的一个定义属性的方法<pre><code class="hljs javascript"><span class="hljs-keyword">let</span> person=&#123;
	<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;张三&#x27;</span>
&#125;
<span class="hljs-comment">// 基本属性</span>
<span class="hljs-built_in">Object</span>.defineProperty(person,<span class="hljs-string">&#x27;age&#x27;</span>,&#123;
    <span class="hljs-attr">value</span>:<span class="hljs-number">18</span>,
    <span class="hljs-attr">writable</span>:<span class="hljs-literal">true</span>, <span class="hljs-comment">//只能修改</span>
    <span class="hljs-attr">configurable</span>: <span class="hljs-literal">true</span>,  <span class="hljs-comment">// 只能删除</span>
    <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">true</span>  <span class="hljs-comment">// 可以枚举(遍历)</span>
&#125;)

<span class="hljs-comment">// 高级属性</span>
<span class="hljs-keyword">let</span> person=&#123;
	<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;张三&#x27;</span>
&#125;
<span class="hljs-keyword">let</span> number=<span class="hljs-number">19</span>
<span class="hljs-built_in">Object</span>.defineProperty(person,<span class="hljs-string">&#x27;age&#x27;</span>,&#123;
	<span class="hljs-comment">// 读取时，调用该函数</span>
    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params"></span>)</span>&#123;
    	<span class="hljs-keyword">return</span> number
    &#125;,
    <span class="hljs-comment">// 修改时，调用该函数</span>
    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">value</span>)</span>&#123;
		number=value
	&#125;
&#125;)</code></pre></li>
</ul>
<h4 id="vue中的数据代理"><a href="#vue中的数据代理" class="headerlink" title="vue中的数据代理"></a>vue中的数据代理</h4><ul>
<li>通过一个对象代替另一个对象的操作（读/写）</li>
<li>vue中通过数据代理，vm.xx代理vm.data.xx<pre><code class="hljs javascript">data () &#123;
    <span class="hljs-keyword">return</span> &#123;
        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;交院&#x27;</span>,
        <span class="hljs-attr">address</span>: <span class="hljs-string">&#x27;湖南&#x27;</span>
    &#125;
&#125;
<span class="hljs-function"><span class="hljs-title">create</span>(<span class="hljs-params"></span>)</span>&#123;
	<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.name)	<span class="hljs-comment">//这里通过vm.name代理了vm.data.name</span>
&#125;</code></pre></li>
</ul>
<pre><code class="hljs javascript"><span class="hljs-keyword">let</span> person=&#123;
  <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;张三&#x27;</span>,
  <span class="hljs-attr">age</span>: <span class="hljs-number">18</span>
&#125;
<span class="hljs-keyword">let</span> p=&#123;&#125;
<span class="hljs-built_in">Object</span>.keys(person).forEach(<span class="hljs-function"><span class="hljs-params">el</span>=&gt;</span>&#123;
  <span class="hljs-built_in">Object</span>.defineProperty(p,el,&#123;
    <span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params"></span>)</span>&#123;
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;访问了&quot;</span>+person[el]);
      <span class="hljs-keyword">return</span> person[el]
    &#125;,
    <span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">val</span>)</span>&#123;
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;修改了&quot;</span>+person[el]+<span class="hljs-string">&quot;,马上去更新页面&quot;</span>);
      person[el]=val
    &#125;
  &#125;)
&#125;)</code></pre>

<h2 id="指令"><a href="#指令" class="headerlink" title="指令"></a>指令</h2><h4 id="内置指令"><a href="#内置指令" class="headerlink" title="内置指令"></a>内置指令</h4><blockquote>
<p>内容渲染指令：v-text/v-html(支持html标签)<br>属性绑定指令：v-bind(简写:)，例如:style=”xxx”，能绑定js语法<br>双向绑定指令：v-model(一般用于输入元素)，例如v-model=””<br>条件渲染指令：v-if/v-else-if/v-else<br>列表渲染指令：v-for=”item in items” :key=”index”<br>事件绑定指令：v-on:事件名(简写@)</p>
</blockquote>
<h4 id="v-show跟v-if的区别"><a href="#v-show跟v-if的区别" class="headerlink" title="v-show跟v-if的区别"></a>v-show跟v-if的区别</h4><ol>
<li>v-show<blockquote>
<p>隐藏时，添加样式style=”display:none”<br>如果频繁切换显示状态，建议用v-show</p>
</blockquote>
</li>
<li>v-if<blockquote>
<p>隐藏时，直接删除该元素<br>初始化就隐藏，后续也不显示，建议用v-if</p>
</blockquote>
</li>
</ol>
<h4 id="常用指令"><a href="#常用指令" class="headerlink" title="常用指令"></a>常用指令</h4><ol>
<li><p>v-model</p>
<blockquote>
<p>双向数据绑定</p>
</blockquote>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;input&quot;</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;男&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;女&quot;</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;num&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;num&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;num&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;city&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;select&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;city1&quot;</span>&gt;</span>city1<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;city2&quot;</span>&gt;</span>city2<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;city3&quot;</span>&gt;</span>city3<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;city4&quot;</span>&gt;</span>city4<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span></code></pre>
<pre><code class="hljs javascript"><span class="hljs-keyword">var</span> vm=<span class="hljs-keyword">new</span> Vue(&#123;
    <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,
    <span class="hljs-attr">data</span>:&#123;
        <span class="hljs-attr">input</span>:<span class="hljs-string">&#x27;&#x27;</span>,
        <span class="hljs-attr">radio</span>:<span class="hljs-string">&#x27;&#x27;</span>,
        <span class="hljs-attr">checkbox</span>:[],
        <span class="hljs-attr">select</span>:<span class="hljs-string">&#x27;&#x27;</span>
    &#125;
&#125;)</code></pre></li>
<li><p>v-for((el,index)in items) :key=”index”</p>
<blockquote>
<p>el:每个元素<br>index:索引<br>items:数组<br>:key=”index”,必须绑定一个唯一标识</p>
</blockquote>
</li>
</ol>
<h4 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h4><blockquote>
<p>自定义指令中有很多钩子函数：bind(),inserted()，update()等等<br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/custom-directive.html">具体看官网</a></p>
</blockquote>
<ol>
<li>局部自定义指令<pre><code class="hljs javascript"><span class="hljs-keyword">new</span> Vue(&#123;
	<span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,
	<span class="hljs-attr">directives</span>:&#123;
	<span class="hljs-attr">direct1</span>:&#123;
	<span class="hljs-function"><span class="hljs-title">bind</span>(<span class="hljs-params">el,binding,vnode</span>)</span>&#123;
	&#125;,
	<span class="hljs-function"><span class="hljs-title">inserted</span>(<span class="hljs-params">el,binding,vnode</span>)</span>&#123;
	&#125;
	...
	&#125;
&#125;
&#125;)</code></pre></li>
<li>全局自定义指令<pre><code class="hljs javascript">Vue.directive(<span class="hljs-string">&quot;direct1&quot;</span>,&#123;
	<span class="hljs-function"><span class="hljs-title">bind</span>(<span class="hljs-params">el,binding,vnode</span>)</span>&#123;
	&#125;,
	<span class="hljs-function"><span class="hljs-title">inserted</span>(<span class="hljs-params">el,binding,vnode</span>)</span>&#123;
	&#125;
	...
&#125;)</code></pre></li>
</ol>
<h4 id="钩子函数"><a href="#钩子函数" class="headerlink" title="钩子函数"></a>钩子函数</h4><blockquote>
<p>bind():绑定元素，可以进行初始化，只调用一次<br><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/custom-directive.html">具体参数</a></p>
</blockquote>
<h2 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h2><h4 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h4><ol>
<li><p>prevent</p>
<blockquote>
<p>阻止默认行为，表达提交，连接跳转</p>
</blockquote>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.baidu.com/&quot;</span> @<span class="hljs-attr">click.prevent</span>=<span class="hljs-string">&quot;stop($event)&quot;</span>&gt;</span>跳转到百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
<pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-title">stop</span>(<span class="hljs-params">e</span>)</span>&#123;
    <span class="hljs-comment">// e.preventDefault();</span>
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;防止事件冒泡&quot;</span>);
&#125;</code></pre></li>
<li><p>stop</p>
<blockquote>
<p>阻止事件冒泡</p>
</blockquote>
</li>
<li><p>once</p>
<blockquote>
<p>事件只触发一次</p>
</blockquote>
</li>
</ol>
<h4 id="按键修饰符"><a href="#按键修饰符" class="headerlink" title="按键修饰符"></a>按键修饰符</h4><blockquote>
<p>@keyup.按键名</p>
</blockquote>
<h4 id="v-model修饰符"><a href="#v-model修饰符" class="headerlink" title="v-model修饰符"></a>v-model修饰符</h4><ol>
<li>number<blockquote>
<p>转化为数值</p>
</blockquote>
</li>
<li>trim<blockquote>
<p>去掉首位空字符</p>
</blockquote>
</li>
<li>lazy<blockquote>
<p>页面的数值延迟显示</p>
</blockquote>
</li>
</ol>
<h2 id="拓展"><a href="#拓展" class="headerlink" title="拓展"></a>拓展</h2><h4 id="插值语法"><a href="#插值语法" class="headerlink" title="插值语法"></a>插值语法</h4><blockquote>
<p>因为v-text/v-html会覆盖文本内容，所以新增插值语法</p>
</blockquote>
<pre><code class="hljs vue">&lt;p&gt;姓名:&#123;&#123;name&#125;&#125;&lt;/p&gt;
//或
&lt;p class=&quot;&#123;&#123;xxx&#125;&#125;&quot;&gt;&lt;/p&gt;</code></pre>

<h4 id="数据代理"><a href="#数据代理" class="headerlink" title="数据代理"></a>数据代理</h4><blockquote>
<p>vue经过数据代理：原本this._data.xx或this.$data.xxx可以用this.xxx代替</p>
</blockquote>
<h4 id="事件绑定-event"><a href="#事件绑定-event" class="headerlink" title="事件绑定$event"></a>事件绑定$event</h4><blockquote>
<p>vue提供了一个内置变量，名字叫$event,他就是dom元素的事件对象<br>属性target指向的是dom元素本身</p>
</blockquote>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;add(1,$event)&quot;</span>&gt;</span>+n<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> vm=<span class="hljs-keyword">new</span> Vue(&#123;
	<span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,
	<span class="hljs-attr">methods</span>:&#123;
	<span class="hljs-function"><span class="hljs-title">add</span>(<span class="hljs-params">num,e</span>)</span>&#123;
		<span class="hljs-built_in">console</span>.log(num)
		<span class="hljs-built_in">console</span>.log(e)
	&#125;
	&#125;
&#125;)</code></pre>
<p><img src="https://imgpp.com/s1/2022/03/21/image77159dccc0b529b9.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/03/21/image77159dccc0b529b9.png" srcset="" alt="效果图"></p>
<p><img src="https://imgpp.com/s1/2022/03/21/image91bcf42781ef2523.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/03/21/image91bcf42781ef2523.png" srcset="" alt="效果图"></p>
<h2 id="计算-computed"><a href="#计算-computed" class="headerlink" title="计算(computed)"></a>计算(computed)</h2><ul>
<li>在模板中用法跟data一样</li>
<li>跟methods相比有缓存机制，调用更方便，更快<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> vm=<span class="hljs-keyword">new</span> Vue(&#123;
    <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,
    <span class="hljs-attr">data</span>:&#123;
        <span class="hljs-attr">firstname</span>:<span class="hljs-string">&quot;zhang&quot;</span>,
        <span class="hljs-attr">lastname</span>:<span class="hljs-string">&quot;san&quot;</span>
    &#125;,
    <span class="hljs-attr">computed</span>:&#123;
        <span class="hljs-function"><span class="hljs-title">myname</span>(<span class="hljs-params"></span>)</span>&#123;
        	<span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.firstname+<span class="hljs-string">&#x27;-&#x27;</span>+<span class="hljs-built_in">this</span>.lastname
        &#125;
	&#125;,
	<span class="hljs-attr">computed</span>:&#123;
        <span class="hljs-attr">myname</span>:&#123;
        	<span class="hljs-comment">// 初次读取时调用，所依赖的数据发生变化时调用，set</span>
        	<span class="hljs-function"><span class="hljs-title">get</span>(<span class="hljs-params"></span>)</span>&#123;
        		<span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.firstname+<span class="hljs-string">&#x27;-&#x27;</span>+<span class="hljs-built_in">this</span>.lastname
        	&#125;
        	<span class="hljs-comment">// 修改</span>
        	<span class="hljs-function"><span class="hljs-title">set</span>(<span class="hljs-params">value</span>)</span>&#123;
        		<span class="hljs-built_in">this</span>.firstname=value.split(<span class="hljs-string">&#x27;-&#x27;</span>)[<span class="hljs-number">0</span>]
        		<span class="hljs-built_in">this</span>.firstname=value.split(<span class="hljs-string">&#x27;-&#x27;</span>)[<span class="hljs-number">1</span>]
        	&#125;
        &#125;
	&#125;
&#125;)</code></pre></li>
</ul>
<h2 id="侦听-watch"><a href="#侦听-watch" class="headerlink" title="侦听(watch)"></a>侦听(watch)</h2><blockquote>
<p>侦听data中数据的变化<br>newVal:新的值<br>oldVal:旧的值<br>一般写法：函数形式</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> vm=<span class="hljs-keyword">new</span> Vue(&#123;
    <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,
    <span class="hljs-attr">data</span>:&#123;
        <span class="hljs-attr">username</span>:<span class="hljs-string">&quot;&quot;</span>
    &#125;,
    <span class="hljs-attr">watch</span>:&#123;
        <span class="hljs-function"><span class="hljs-title">username</span>(<span class="hljs-params">newVal,oldVal</span>)</span>&#123;	
            <span class="hljs-built_in">console</span>.log(newVal,oldVal);
        &#125;
    &#125;
&#125;)</code></pre>
<blockquote>
<p>作用：判断用户名是否被占用<br>缺点：刚进入页面时，不会被触发</p>
</blockquote>
<h4 id="immediate和deep"><a href="#immediate和deep" class="headerlink" title="immediate和deep"></a>immediate和deep</h4><blockquote>
<p>为了解决刚进入页面时，不会被触发这个问题,使用immediate即时执行<br>为了侦听到对象中复杂的数据使用，deep深度侦听<br>写法：对象形式</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">const</span> vm=<span class="hljs-keyword">new</span> Vue(&#123;
    <span class="hljs-attr">el</span>:<span class="hljs-string">&quot;#app&quot;</span>,
    <span class="hljs-attr">data</span>:&#123;
        <span class="hljs-attr">username</span>:&#123;
            <span class="hljs-attr">firstname</span>:<span class="hljs-string">&quot;zhang&quot;</span>,
            <span class="hljs-attr">lastname</span>:<span class="hljs-string">&quot;san&quot;</span>
        &#125;
    &#125;,
    <span class="hljs-attr">watch</span>:&#123;
        <span class="hljs-attr">username</span>:&#123;
        	<span class="hljs-function"><span class="hljs-title">hander</span>(<span class="hljs-params">newVal,oldVal</span>)</span>&#123;	<span class="hljs-comment">//hander:处理</span>
        		<span class="hljs-built_in">console</span>.log(newVal,oldVal);
        	&#125;,
        	<span class="hljs-attr">immediate</span>:<span class="hljs-literal">true</span>,	<span class="hljs-comment">//immediate:即时,刚加载页面就触发一次，默认值：false</span>
        	<span class="hljs-attr">deep</span>:<span class="hljs-literal">true</span>
        &#125;
    &#125;
&#125;)</code></pre>

<h4 id="watch跟computed对比"><a href="#watch跟computed对比" class="headerlink" title="watch跟computed对比"></a>watch跟computed对比</h4><ul>
<li>computed能做的watch都能做</li>
<li>watch能做的还有异步操作（定时器，ajax请求）</li>
</ul>
<h2 id="nextTick"><a href="#nextTick" class="headerlink" title="nextTick"></a>nextTick</h2><blockquote>
<p>简单理解就是在模板解析后，再调用这个回调函数</p>
</blockquote>
<ul>
<li><p>作用：</p>
<blockquote>
<p>$nextTick(回调函数)<br>将回调函数延迟在下一次dom更新完成后调用<br>例子：表单自动聚焦</p>
</blockquote>
</li>
<li><p>使用：</p>
<pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-title">demo</span>(<span class="hljs-params"></span>)</span>&#123;
	......
	$nextTick(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;
		<span class="hljs-built_in">this</span>.$refs.input.focus()
	&#125;)
	......
&#125;</code></pre></li>
</ul>
<h4 id="vue监测数据改变原理"><a href="#vue监测数据改变原理" class="headerlink" title="vue监测数据改变原理"></a>vue监测数据改变原理</h4><h2 id="key的原理"><a href="#key的原理" class="headerlink" title="key的原理"></a>key的原理</h2><ol>
<li><p>虚拟dom中key的作用<br>key时虚拟dom对象的标识，当状态中的数据发生变化时，vue会根据新的数据生成新的虚拟dom<br>随后vue根据新的虚拟dom的key找到初始dom进行对比算法，比较规则如下：</p>
</li>
<li><p>对比规则：<br>（1)新虚拟dom的key找到初始的虚拟dom的相同key</p>
</li>
<li><p>若虚拟dom中的内容没变，则直接使用真实dom</p>
</li>
<li><p>入虚拟dom中的内容变了，则生成新的真实dom，替换掉初始真实dom<br>（2）如新虚拟dom没能找到初始虚拟dom中相同的key<br>则会创建新的真实dom，添加到页面中</p>
</li>
<li><p>用index作key引发的问题：</p>
</li>
<li><p>如对数据进行逆序添加/逆序删除等破坏结构的操作：<br>则数据得不到复用，效率降低</p>
</li>
<li><p>如果结构中含有输入类的元素<br>会产生错误的dom更新==》界面有问题</p>
</li>
<li><p>开发中如何选择key？？</p>
</li>
<li><p>最好使用每条数据的唯一标识符作为key，比如身份证号，手机号，邮箱，学号等等</p>
</li>
<li><p>如果没有对数据进行逆序操作等破坏结构的操作，则可以用默认index作为key进行编号</p>
</li>
</ol>
<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><h4 id="全局组件"><a href="#全局组件" class="headerlink" title="全局组件"></a>全局组件</h4><blockquote>
<p>如果某个组件很通用，可以使用全局组件<br>在main.js配置</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Temp <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./components/Temp.vue&quot;</span>
Vue.component(<span class="hljs-string">&quot;Temp&quot;</span>,Temp)	<span class="hljs-comment">//若使用多个，则继续使用Vue.component()</span></code></pre>

<h2 id="声明周期"><a href="#声明周期" class="headerlink" title="声明周期"></a>声明周期</h2><blockquote>
<p>一个组件从创建到销毁的过程叫做生命周期</p>
</blockquote>
<h3 id="组件创建阶段"><a href="#组件创建阶段" class="headerlink" title="组件创建阶段"></a>组件创建阶段</h3><h4 id="beforecreate和created"><a href="#beforecreate和created" class="headerlink" title="beforecreate和created"></a>beforecreate和created</h4><blockquote>
<p>beforecreate :组件的属性和方法不可用<br>create:组件的属性和方法可用，但模板没被解析，常用于调用methods方法，请求服务器数据并且将请求的数据转存到data中，供template使用</p>
</blockquote>
<h4 id="beforeMouted和mouted"><a href="#beforeMouted和mouted" class="headerlink" title="beforeMouted和mouted"></a>beforeMouted和mouted</h4><blockquote>
<p>beforecreate :组件的属性和方法不可用<br>mouted:组件的属性和方法可用，但模板没被解析，用于操作dom元素</p>
</blockquote>
<h3 id="组件运行阶段"><a href="#组件运行阶段" class="headerlink" title="组件运行阶段"></a>组件运行阶段</h3><h4 id="beforeUpdate和update"><a href="#beforeUpdate和update" class="headerlink" title="beforeUpdate和update"></a>beforeUpdate和update</h4><h3 id="组件销毁阶段"><a href="#组件销毁阶段" class="headerlink" title="组件销毁阶段"></a>组件销毁阶段</h3><h4 id="beforeDestory和destoryed"><a href="#beforeDestory和destoryed" class="headerlink" title="beforeDestory和destoryed"></a>beforeDestory和destoryed</h4><h4 id="props"><a href="#props" class="headerlink" title="props"></a>props</h4><blockquote>
<p>组件的自定义属性<br>作用：子组件定义props可以给父组件传递信息<br>每个父组件定义的props，使得子组件不一样</p>
</blockquote>
<pre><code class="hljs vue">//	子组件
&lt;template&gt;
  &lt;div id=&quot;son&quot;&gt;
  	  &lt;button @click=&quot;add&quot;&gt;+1&lt;/button&gt;  
      &#123;&#123;init&#125;&#125;	&lt;!-- 在模板中使用props --&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default &#123;
	name:&quot;Son&quot;
	props:[&quot;init&quot;],
    methods:&#123;
		add()&#123;
			this.init++	//在js中使用props
		&#125;
	&#125;
&#125;
&lt;/script&gt;</code></pre>
<pre><code class="hljs vue">//	父组件
&lt;template&gt;
  &lt;div id=&quot;father&quot;&gt;
      &lt;Son init=&quot;xxx&quot;/&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
<p><img src="https://imgpp.com/s1/2022/03/26/image.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/03/26/image.png" srcset="" alt="效果图"></p>
<blockquote>
<p>props是只读的，不建议被修改<br>解决方法：将props赋值给data中的属性，间接改变props的值</p>
</blockquote>
<pre><code class="hljs vue">//	子组件
&lt;template&gt;
  &lt;div id=&quot;son&quot;&gt;
  	  &lt;button @click=&quot;add&quot;&gt;+1&lt;/button&gt;  
      &#123;&#123;num&#125;&#125;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default &#123;
	name:&quot;Son&quot;,
	data()&#123;
		return &#123;
		num:this.init	//将props[&quot;init&quot;]赋值给num
		&#125;
	&#125;
	props:[&quot;init&quot;],
    methods:&#123;
		add()&#123;
			this.num++	//在js中使用props
		&#125;
	&#125;
&#125;
&lt;/script&gt;</code></pre>
<blockquote>
<p>以上是数组形式是props的一般写法<br>对象形式写法1:只限制类型</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;
	<span class="hljs-attr">props</span>:&#123;
		<span class="hljs-attr">init</span>:<span class="hljs-built_in">Number</span>	<span class="hljs-comment">//限制类型</span>
	&#125;
&#125;</code></pre>
<blockquote>
<p>对象形式写法2:限制类型,默认值/限制类型，必填<br>default/required不能一起用</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;
	<span class="hljs-attr">props</span>:&#123;
		<span class="hljs-attr">init</span>:&#123;
			<span class="hljs-attr">type</span>:<span class="hljs-built_in">Number</span>,
			<span class="hljs-attr">default</span>:<span class="hljs-number">0</span>
		&#125;,
		<span class="hljs-comment">//或者</span>
		<span class="hljs-attr">init</span>:&#123;
			<span class="hljs-attr">type</span>:<span class="hljs-built_in">Number</span>,
			<span class="hljs-attr">required</span>:<span class="hljs-literal">true</span>
		&#125;
	&#125;
&#125;</code></pre>

<h2 id="动态组件"><a href="#动态组件" class="headerlink" title="动态组件"></a>动态组件</h2><blockquote>
<p>component组件的is属性控制显示组件<br>用动态组件的隐藏和显示本质就是，销毁和创建</p>
</blockquote>
<pre><code class="hljs vue">&lt;component :is=&quot;myComponent&quot;&gt;&lt;/component&gt;

vue(&#123;
  data()&#123;
  	return &#123;
	  myComponent:&#x27;Left&#x27;
	&#125;
  &#125;
&#125;)</code></pre>
<h5 id="keep-alive组件"><a href="#keep-alive组件" class="headerlink" title="keep-alive组件"></a>keep-alive组件</h5><blockquote>
<p>因为动态组件会被销毁，所以用keep-alive来保持状态<br>用keep-alive包裹</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;keep-alive&gt;
      &lt;component :is=&quot;myComponent&quot;&gt;&lt;/component&gt;
    &lt;/keep-alive&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>

<h4 id="keep-alive对应的生命周期函数"><a href="#keep-alive对应的生命周期函数" class="headerlink" title="keep-alive对应的生命周期函数"></a>keep-alive对应的生命周期函数</h4><blockquote>
<p>当组件被缓存，触发deactivated函数<br>当组件被激活，触发activated函数</p>
</blockquote>
<pre><code class="hljs vue">export default&#123;
  deactivated() &#123;
    console.log(&#x27;left被缓存了&#x27;)
  &#125;,
  activated() &#123;
    console.log(&#x27;left被激活了&#x27;)
  &#125;
&#125;</code></pre>

<h4 id="keep-alive组件的include和属性"><a href="#keep-alive组件的include和属性" class="headerlink" title="keep-alive组件的include和属性"></a>keep-alive组件的include和属性</h4><blockquote>
<p>include=”组件名1，组件名2”  组件被缓存<br>exclude=”组件名1，组件名2”  组件不被缓存<br>两个属性不能同时使用</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;keep-alive include=&quot;Left,Right&quot;&gt;
      &lt;component :is=&quot;myComponent&quot;&gt;&lt;/component&gt;
    &lt;/keep-alive&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;keep-alive exclude=&quot;Left,Right&quot;&gt;
      &lt;component :is=&quot;myComponent&quot;&gt;&lt;/component&gt;
    &lt;/keep-alive&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>

<h4 id="声明组件的name和注册组件时的name区别"><a href="#声明组件的name和注册组件时的name区别" class="headerlink" title="声明组件的name和注册组件时的name区别"></a>声明组件的name和注册组件时的name区别</h4><blockquote>
<p>在声明组件时没定义name，默认为注册时的名字<br>声明组件的name威力最大<br>最好声明一个name，用于路由</p>
</blockquote>
<h2 id="过渡与动画"><a href="#过渡与动画" class="headerlink" title="过渡与动画"></a>过渡与动画</h2><ul>
<li><p>作用：再插入，更新，删除dom元素时，再合适的时候给元素添加样式类名</p>
<blockquote>
<p>样式名：<br>*进入的样式：<br>1.v-enter：进入的起点<br>2.v-enter-to：进入的终点<br>3.v-enter-active：进入过程中<br>*离开的样式：<br>1.v-leave：离开的起点<br>2.v-leave-to：离开的终点<br>3.v-leave-active：离开过程中<br>进入的起点==离开的终点 反之一样</p>
</blockquote>
</li>
<li><p>使用</p>
<blockquote>
<p>多个元素过渡，则用transition-group，每个元素要指定key值</p>
</blockquote>
</li>
</ul>
<pre><code class="hljs javascript">&lt;transition name=<span class="hljs-string">&quot;xx&quot;</span>&gt;
	<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>hh<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
&lt;/transition&gt;</code></pre>


<h2 id="组件间通信"><a href="#组件间通信" class="headerlink" title="组件间通信"></a>组件间通信</h2><h4 id="子组件给父组件传值props"><a href="#子组件给父组件传值props" class="headerlink" title="子组件给父组件传值props"></a>子组件给父组件传值props</h4><h4 id="父组件给子组件传值自定义事件"><a href="#父组件给子组件传值自定义事件" class="headerlink" title="父组件给子组件传值自定义事件"></a>父组件给子组件传值自定义事件</h4><h4 id="消息订阅与发布"><a href="#消息订阅与发布" class="headerlink" title="消息订阅与发布"></a>消息订阅与发布</h4><h4 id="全局事件总线"><a href="#全局事件总线" class="headerlink" title="全局事件总线"></a>全局事件总线</h4><ul>
<li><p>用于任意组件间通信</p>
</li>
<li><p>安装全局事件总线：</p>
<pre><code class="hljs javascript"><span class="hljs-keyword">new</span> Vue(&#123;
    ......
    <span class="hljs-function"><span class="hljs-title">beforeCreate</span>(<span class="hljs-params"></span>)</span>&#123;
		Vue.prototype.$bus=<span class="hljs-built_in">this</span>	<span class="hljs-comment">//安装全局事件总线，$bus指vm</span>
    &#125;
&#125;)
    ......</code></pre></li>
<li><p>使用全局事件总线：</p>
</li>
</ul>
<ol>
<li><p>接收数据</p>
<pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-title">methods</span>(<span class="hljs-params"></span>)</span>&#123;
	<span class="hljs-function"><span class="hljs-title">demo</span>(<span class="hljs-params">data</span>)</span>&#123;......&#125;
&#125;,
<span class="hljs-function"><span class="hljs-title">mounted</span>(<span class="hljs-params"></span>)</span>&#123;
	<span class="hljs-built_in">this</span>.$bus.$on(<span class="hljs-string">&quot;xx&quot;</span>,<span class="hljs-built_in">this</span>.demo)
&#125;</code></pre></li>
<li><p>提供数据</p>
<pre><code class="hljs javascript"><span class="hljs-built_in">this</span>.$bus.$emit(<span class="hljs-string">&quot;xx&quot;</span>,数据)</code></pre></li>
</ol>
<ul>
<li>做事做全套,在beforeDestory钩子中用$off解绑所用到的事件。</li>
</ul>
<h4 id="vuex数据共享"><a href="#vuex数据共享" class="headerlink" title="vuex数据共享"></a>vuex数据共享</h4><h2 id="解决跨域"><a href="#解决跨域" class="headerlink" title="解决跨域"></a>解决跨域</h2><ul>
<li>后端配置cors中间件能解决跨域</li>
<li>jsonp前后端一起配置只能解决get跨域问题</li>
<li>代理服务器解决跨域问题</li>
</ul>
<p><img src="https://imgpp.com/s1/2022/05/26/image.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/05/26/image.png" srcset="" alt="代理服务器"></p>
<ul>
<li>配置一个代理服务器，协议/主机号/端口号和浏览器相同</li>
<li>代理服务器和服务器之间不存在跨域问题（跨域问题存在与浏览器和服务器之间，这就是为什么存在xhr的原因）</li>
<li>前端生成代理服务器两种方法：vue脚手架生成代理服务器/nginx（后端）</li>
</ul>
<h4 id="vue脚手架生成代理服务器解决跨域"><a href="#vue脚手架生成代理服务器解决跨域" class="headerlink" title="vue脚手架生成代理服务器解决跨域"></a>vue脚手架生成代理服务器解决跨域</h4><ul>
<li>代理服务器(协议/主机名/端口号）与浏览器相同，所处位置相同</li>
</ul>
<blockquote>
<p>方法1:</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-built_in">module</span>.exports = &#123;
  <span class="hljs-attr">devServer</span>: &#123;
    <span class="hljs-attr">proxy</span>: <span class="hljs-string">&#x27;http://localhost:4000&#x27;</span>	<span class="hljs-comment">//目标服务器地址</span>
  &#125;
&#125;</code></pre>

<blockquote>
<p>方法2：配置多个代理</p>
</blockquote>
<ul>
<li>发起请求时，请求的时8080，请求的是自己(可以访问到public下的文件)</li>
<li>通过下面给一个路径前缀可以防止访问public目录下的文件，前端也必须加上一个前缀<pre><code class="hljs javascript"><span class="hljs-built_in">module</span>.exports = &#123;
  <span class="hljs-attr">devServer</span>: &#123;
    <span class="hljs-attr">proxy</span>: &#123;
      <span class="hljs-string">&#x27;/proxy&#x27;</span>: &#123;	<span class="hljs-comment">//路径前缀自拟</span>
        <span class="hljs-attr">target</span>: <span class="hljs-string">&#x27;&lt;url&gt;&#x27;</span>,	<span class="hljs-comment">//服务器地址</span>
        <span class="hljs-attr">pathRewrite</span>:&#123;<span class="hljs-string">&#x27;^/proxy&#x27;</span>:<span class="hljs-string">&#x27;&#x27;</span>&#125;	<span class="hljs-comment">//路径重写</span>
        <span class="hljs-attr">ws</span>: <span class="hljs-literal">true</span>,	<span class="hljs-comment">//用于支持websocket</span>
        <span class="hljs-attr">changeOrigin</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">//默认为true，true:服务器收到请求头host：为服务器目标地址（假的),false:服务器收到请求体中host为前端地址（真)</span>
      &#125;,
      <span class="hljs-string">&#x27;/foo&#x27;</span>: &#123;
        <span class="hljs-attr">target</span>: <span class="hljs-string">&#x27;&lt;other_url&gt;&#x27;</span>
      &#125;
    &#125;
  &#125;
&#125;</code></pre></li>
</ul>
<h2 id="网络请求"><a href="#网络请求" class="headerlink" title="网络请求"></a>网络请求</h2><h4 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h4><blockquote>
<p>专注于网络请求的库<br>简单写法:</p>
</blockquote>
<pre><code class="hljs javascript">axios.请求方式(<span class="hljs-string">&quot;请求地址&quot;</span>).then(<span class="hljs-function">(<span class="hljs-params">response</span>)=&gt;</span>&#123;
	<span class="hljs-comment">//成功时的回调函数</span>
&#125;)	<span class="hljs-comment">//返回的是一个promise的实例化对象（异步操作）</span></code></pre>
<blockquote>
<p>复杂写法:</p>
</blockquote>
<pre><code class="hljs javascript">axios(&#123;
	<span class="hljs-attr">method</span>:<span class="hljs-string">&quot;请求方式&quot;</span>,
	<span class="hljs-attr">url</span>:<span class="hljs-string">&quot;请求地址&quot;</span>,
	<span class="hljs-attr">params</span>:&#123;
		<span class="hljs-comment">//get传参</span>
	&#125;,
	<span class="hljs-attr">data</span>:&#123;
		<span class="hljs-comment">//post传参</span>
	&#125;
&#125;).then(<span class="hljs-function">(<span class="hljs-params">response</span>)=&gt;</span>&#123;
	<span class="hljs-comment">//成功时的回调函数</span>
&#125;)	<span class="hljs-comment">//返回的是一个promise的实例化对象（异步操作）</span></code></pre>

<h4 id="axios解构赋值"><a href="#axios解构赋值" class="headerlink" title="axios解构赋值"></a>axios解构赋值</h4><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> fun=<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;
	<span class="hljs-keyword">const</span> &#123;<span class="hljs-attr">data</span>:res&#125;=<span class="hljs-keyword">await</span> axios.get(<span class="hljs-string">&quot;&quot;</span>)
	<span class="hljs-built_in">console</span>.log(res)	<span class="hljs-comment">//这个res就相当于response.data.data</span>
&#125;</code></pre>

<h2 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h2><h4 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h4><blockquote>
<p>子组件中声明一个插槽</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;left&quot;&gt;
      &lt;h2&gt;左组件&lt;/h2&gt;
      &lt;hr&gt;
      &lt;slot name=&quot;content&quot;&gt;	&lt;!-- 带name：具名插槽，不带：默认插槽 --&gt;
      	&lt;p&gt;默认内容&lt;/p&gt;
      &lt;/slot&gt;	&lt;!-- 每个插槽都要有一个name，默认是default,在插槽中能定义后备内容 --&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>

<blockquote>
<p>父组件DIY插槽</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;h1&gt;根组件&lt;/h1&gt;
    &lt;hr&gt;
    &lt;Left&gt;
      &lt;template v-slot:content&gt;	&lt;!-- v-slot跟插槽名字，这指令只能卸载template上，简写# --&gt;
      	&lt;p&gt;diy插槽内容&lt;/p&gt;
      &lt;template/&gt;
    &lt;/Left&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>

<h4 id="作用域插槽"><a href="#作用域插槽" class="headerlink" title="作用域插槽"></a>作用域插槽</h4><blockquote>
<p>子组件自定义属性，通过scope传递到父组件中</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;chirld&quot;&gt;
      &lt;div class=&quot;header&quot;&gt;&lt;slot name=&quot;header&quot;&gt;&lt;/slot&gt;&lt;/div&gt;
      &lt;div class=&quot;content&quot;&gt;&lt;slot name=&quot;content&quot; :data=&quot;data&quot;&gt;&lt;/slot&gt;&lt;/div&gt;
      &lt;div class=&quot;footer&quot;&gt;&lt;slot name=&quot;footer&quot;&gt;&lt;/slot&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>

<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;Chirld&gt;
      &lt;template #header&gt;
        &lt;p&gt;一首诗&lt;/p&gt;
      &lt;/template&gt;
      &lt;template #content=&quot;scope&quot;&gt;
        &lt;div&gt;
          &lt;p&gt;长风破浪会有时&lt;/p&gt;
          &lt;p&gt;直挂云帆济沧海&lt;/p&gt;
          &lt;p&gt;&#123;&#123;scope.data.msg1&#125;&#125;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      &lt;template #footer&gt;
        &lt;p&gt;作者：张程&lt;/p&gt;
      &lt;/template&gt;
    &lt;/Chirld&gt;
  &lt;/div&gt;
  &lt;!--  --&gt;
&lt;/template&gt;</code></pre>

<h4 id="插槽解构赋值"><a href="#插槽解构赋值" class="headerlink" title="插槽解构赋值"></a>插槽解构赋值</h4><pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;chirld&quot;&gt;
      &lt;div class=&quot;content&quot;&gt;&lt;slot name=&quot;content&quot; :data=&quot;data&quot; user=&quot;猫头鹰&quot;&gt;&lt;/slot&gt;     &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>

<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;Chirld&gt;
      &lt;template #content=&quot;&#123;data,user&#125;&quot;&gt;
        &lt;div&gt;
          &lt;p&gt;数据：&#123;&#123;data&#125;&#125;&lt;/p&gt;
          &lt;p&gt;用户：&#123;&#123;user&#125;&#125;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/template&gt;
    &lt;/Chirld&gt;
  &lt;/div&gt;
  &lt;!--  --&gt;
&lt;/template&gt;</code></pre>

<h2 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h2><blockquote>
<p>路由:对应关系<br>在vue中就是：hash地址(锚链接)和组件的对应关系</p>
</blockquote>
<p><img src="https://imgpp.com/s1/2022/03/23/image.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/03/23/image.png" srcset="" alt="示意图"></p>
<h4 id="工作方式"><a href="#工作方式" class="headerlink" title="工作方式"></a>工作方式</h4><p><img src="https://imgpp.com/s1/2022/03/23/image0fe91b34ca7689ce.png" class="lazy" data-srcset="https://imgpp.com/s1/2022/03/23/image0fe91b34ca7689ce.png" srcset="" alt="工作方式"></p>
<h4 id="基本使用-1"><a href="#基本使用-1" class="headerlink" title="基本使用"></a>基本使用</h4><ol>
<li>安装和配置<blockquote>
<p>和vue2配套的是3版本</p>
</blockquote>
<pre><code class="hljs shell">npm install vue-router@3</code></pre>
<blockquote>
<p>在src下创router/index.js</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-comment">//	1. 导入vue和vue-router包</span>
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>
<span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue-router&quot;</span>
<span class="hljs-comment">//	2. vue使用路由插件</span>
Vue.use(VueRouter)

<span class="hljs-comment">//	3. 实例化一个路由对象</span>
<span class="hljs-keyword">const</span> router=<span class="hljs-keyword">new</span> VueRouter(&#123;
    <span class="hljs-comment">// routes是一个数组，存储哈希地址和组件的对应关系</span>
    <span class="hljs-attr">routes</span>: [
        &#123;
            <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/home&#x27;</span>,
            <span class="hljs-attr">component</span>:Home
        &#125;,
        &#123;
            <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/movie&#x27;</span>,
            <span class="hljs-attr">component</span>:Movie
        &#125;,
        &#123;
            <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>,
            <span class="hljs-attr">component</span>:About
        &#125;,
        
    ]
&#125;)
<span class="hljs-comment">//	4. 对外共享路由</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> router</code></pre></li>
</ol>
<blockquote>
<p>在main.js中引入路由模块</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./router/index.js&quot;</span>
<span class="hljs-keyword">new</span> Vue(&#123;
  <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App),
  router	<span class="hljs-comment">//Vue构造器中router参数用来加载路由</span>
&#125;).$mount(<span class="hljs-string">&#x27;#app&#x27;</span>)</code></pre>

<blockquote>
<p>只要在项目中安装了vue-router，就能使用<vue-router></vue-router>标签</p>
</blockquote>
<blockquote>
<p>在页面中显示</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;router-link to=&quot;/home&quot;&gt;主页&lt;/router-link&gt;
    &lt;router-link to=&quot;/movie&quot;&gt;电影&lt;/router-link&gt;
    &lt;router-link to=&quot;/about&quot;&gt;关于&lt;/router-link&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;</code></pre>

<h4 id="动态路由"><a href="#动态路由" class="headerlink" title="动态路由"></a>动态路由</h4><pre><code class="hljs javascript">&#123;
    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/:id&#x27;</span>,
    <span class="hljs-attr">component</span>: User,
&#125;</code></pre>

<h4 id="通配符路由"><a href="#通配符路由" class="headerlink" title="通配符路由"></a>通配符路由</h4><pre><code class="hljs javascript">&#123;
    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user-*&#x27;</span>,
    <span class="hljs-attr">component</span>: User,
&#125;</code></pre>
<h4 id="嵌套路由"><a href="#嵌套路由" class="headerlink" title="嵌套路由"></a>嵌套路由</h4><pre><code class="hljs javascript">routes:[
	&#123;
    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user-*&#x27;</span>,
    <span class="hljs-attr">component</span>: User,
    <span class="hljs-attr">children</span>:[
    	&#123;
    		<span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/profile&#x27;</span>,
    		<span class="hljs-attr">component</span>: Profile,
    	&#125;,
    	&#123;
    		<span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/posts&#x27;</span>,
    		<span class="hljs-attr">component</span>: Posts,
    	&#125;,
    ]
    &#125;
]</code></pre>

<h4 id="命名路由"><a href="#命名路由" class="headerlink" title="命名路由"></a>命名路由</h4><pre><code class="hljs javascript">&#123;
    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/user/:id&#x27;</span>,
    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;user&quot;</span>
    <span class="hljs-attr">component</span>: User,
&#125;
<span class="hljs-comment">// 引用</span>
<span class="hljs-comment">// router-link to=&quot;&#123;name:&#x27;user&#x27;,params:&#123;id:123&#125;&#125;&quot;</span>
<span class="hljs-built_in">this</span>.$router.push(&#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;user&#x27;</span>,<span class="hljs-attr">params</span>:&#123;<span class="hljs-attr">id</span>:<span class="hljs-number">123</span>&#125;&#125;)</code></pre>

<h4 id="重定向路由"><a href="#重定向路由" class="headerlink" title="重定向路由"></a>重定向路由</h4><pre><code class="hljs javascript">&#123;
    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/&#x27;</span>,
    <span class="hljs-attr">component</span>: Home,
    <span class="hljs-attr">label</span>: <span class="hljs-string">&quot;首页&quot;</span>,
    <span class="hljs-attr">redirect</span>:<span class="hljs-string">&quot;user&quot;</span>	<span class="hljs-comment">//字符串</span>
    <span class="hljs-attr">redirect</span>:&#123;<span class="hljs-attr">path</span>:<span class="hljs-string">&quot;/user&quot;</span>&#125;	<span class="hljs-comment">//对象</span>
    <span class="hljs-attr">redirect</span>:&#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;user&quot;</span>&#125;	<span class="hljs-comment">//命名路由</span>
&#125;</code></pre>
<blockquote>
<p>别名</p>
</blockquote>
<pre><code class="hljs javascript"></code></pre>

<h4 id="路由重点"><a href="#路由重点" class="headerlink" title="路由重点"></a>路由重点</h4><blockquote>
<p>路由越先声明，优先级越高<br>this.$router:路由器<br>this.$route:当前路由<br>this.$route.params:当前路由的参数对象</p>
</blockquote>
<h4 id="编程式导航"><a href="#编程式导航" class="headerlink" title="编程式导航"></a>编程式导航</h4><ol>
<li>this.$router.push()</li>
<li>this.$router.replace()</li>
<li>this.$router.go()</li>
</ol>
<h2 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h2><blockquote>
<p>数据共享，应用与中大型项目</p>
</blockquote>
<h4 id="基本使用-2"><a href="#基本使用-2" class="headerlink" title="基本使用"></a>基本使用</h4><blockquote>
<p>安装</p>
</blockquote>
<pre><code class="hljs shell">npm install vuex@3.6.2 -S</code></pre>
<blockquote>
<p>在src下配置store.js文件</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vue&quot;</span>
<span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vuex&quot;</span>
Vue.use(Vuex)

<span class="hljs-keyword">const</span> store=<span class="hljs-keyword">new</span> Vuex.Store(&#123;
	<span class="hljs-attr">state</span>:&#123;
		<span class="hljs-attr">xxx</span>:<span class="hljs-number">0</span>
	&#125;,
	<span class="hljs-attr">mutations</span>:&#123;
	
	&#125;,
	<span class="hljs-attr">actions</span>:&#123;
	
	&#125;
&#125;)
<span class="hljs-keyword">export</span> &#123;store&#125;</code></pre>
<blockquote>
<p>在main.js中导入并挂载他</p>
</blockquote>
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> &#123;store&#125; form <span class="hljs-string">&quot;./store.js&quot;</span>

<span class="hljs-keyword">new</span> Vue(&#123;
  <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App),
  store
&#125;).$mount(<span class="hljs-string">&#x27;#app&#x27;</span>)</code></pre>

<h4 id="state"><a href="#state" class="headerlink" title="state"></a>state</h4><blockquote>
<p>显示数据</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;add&quot;&gt;
      &lt;p&gt;当前最新值为:&#123;&#123;$store.state.count&#125;&#125;&lt;/p&gt;
      &lt;button @click=&quot;addHeader&quot;&gt;+1&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default &#123;
    name:&quot;Add&quot;,
    methods: &#123;
        addHeader()&#123;
            this.$store.state.count++
        &#125;
    &#125;,
&#125;
&lt;/script&gt;</code></pre>

<blockquote>
<p>mapState<br>在vue按需引入mapState</p>
</blockquote>
<pre><code class="hljs vue">&lt;template&gt;
  &lt;div id=&quot;sub&quot;&gt;
      &lt;p&gt;当前最新值为:&#123;&#123;count&#125;&#125;&lt;/p&gt;
      &lt;button @click=&quot;subHeader&quot;&gt;-1&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import &#123;mapState&#125; from &quot;vuex&quot;
export default &#123;
    name:&quot;Sub&quot;,
    methods: &#123;
        subHeader()&#123;
            this.count--
        &#125;
    &#125;,
    computed:&#123;
        ...mapState([&#x27;count&#x27;])
    &#125;
&#125;
&lt;/script&gt;</code></pre>

<h4 id="mutations"><a href="#mutations" class="headerlink" title="mutations"></a>mutations</h4><blockquote>
<p>更新数据<br>将组件中操作共享数据的方法都集中在这个api中，方便管理</p>
</blockquote>
<blockquote>
<p>store.js中配置</p>
</blockquote>
<pre><code class="hljs javascript">mutations:&#123;
	<span class="hljs-function"><span class="hljs-title">add</span>(<span class="hljs-params">state</span>)</span>&#123;
		state.count++
	&#125;
&#125;,</code></pre>
<blockquote>
<p>在组件中使用</p>
</blockquote>
<pre><code class="hljs javascript">methods: &#123;
    <span class="hljs-function"><span class="hljs-title">addHeader</span>(<span class="hljs-params"></span>)</span>&#123;
    <span class="hljs-built_in">this</span>.$store.commit(<span class="hljs-string">&quot;add&quot;</span>)
    &#125;
&#125;</code></pre>

<blockquote>
<p>传参</p>
</blockquote>
<pre><code class="hljs javascript">mutations:&#123;
	<span class="hljs-function"><span class="hljs-title">add</span>(<span class="hljs-params">state,num</span>)</span>&#123;
		state.count+=num
	&#125;
&#125;
.....
<span class="hljs-attr">methods</span>: &#123;
    <span class="hljs-function"><span class="hljs-title">addHeader</span>(<span class="hljs-params"></span>)</span>&#123;
    <span class="hljs-built_in">this</span>.$store.commit(<span class="hljs-string">&quot;add&quot;</span>,<span class="hljs-number">10</span>)
    &#125;
&#125;</code></pre>

<blockquote>
<p>mapMutations</p>
</blockquote>
<pre><code class="hljs javascript">methods: &#123;
	...mapMutations([<span class="hljs-string">&quot;add&quot;</span>]),
    <span class="hljs-function"><span class="hljs-title">addHeader</span>(<span class="hljs-params"></span>)</span>&#123;
    <span class="hljs-built_in">this</span>.add()
    &#125;
&#125;</code></pre>

<h4 id="actions"><a href="#actions" class="headerlink" title="actions"></a>actions</h4><blockquote>
<p>存放异步任务的一个api</p>
</blockquote>
<pre><code class="hljs javascript">actions:&#123;
	<span class="hljs-function"><span class="hljs-title">addSynic</span>(<span class="hljs-params">context</span>)</span>&#123;
		settimeout(<span class="hljs-function">()=&gt;</span>&#123;
			context.commit(<span class="hljs-string">&quot;add&quot;</span>)
		&#125;,<span class="hljs-number">1000</span>)
	&#125;
&#125;</code></pre>

<pre><code class="hljs javascript">methods:&#123;
	<span class="hljs-function"><span class="hljs-title">addHeader</span>(<span class="hljs-params"></span>)</span>&#123;
    	<span class="hljs-built_in">this</span>.$store.dispatch(<span class="hljs-string">&quot;addSynic&quot;</span>)
    &#125;
&#125;</code></pre>
<blockquote>
<p>传参</p>
</blockquote>
<pre><code class="hljs javascript">actions:&#123;
	<span class="hljs-function"><span class="hljs-title">addSynic</span>(<span class="hljs-params">context,num</span>)</span>&#123;
		settimeout(<span class="hljs-function">()=&gt;</span>&#123;
			context.commit(<span class="hljs-string">&quot;add&quot;</span>,num)
		&#125;,<span class="hljs-number">1000</span>)
	&#125;
&#125;
......
<span class="hljs-attr">methods</span>:&#123;
	<span class="hljs-function"><span class="hljs-title">addHeader</span>(<span class="hljs-params"></span>)</span>&#123;
    	<span class="hljs-built_in">this</span>.$store.dispatch(<span class="hljs-string">&quot;addSynic&quot;</span>,<span class="hljs-number">10</span>)
    &#125;
&#125;</code></pre>

<blockquote>
<p>mapActions</p>
</blockquote>
<pre><code class="hljs javascript">actions:&#123;
	<span class="hljs-function"><span class="hljs-title">addSynic</span>(<span class="hljs-params">context,num</span>)</span>&#123;
		settimeout(<span class="hljs-function">()=&gt;</span>&#123;
			context.commit(<span class="hljs-string">&quot;add&quot;</span>,num)
		&#125;,<span class="hljs-number">1000</span>)
	&#125;
&#125;
......
<span class="hljs-keyword">import</span> &#123;mapActions&#125; <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;vuex&quot;</span>

<span class="hljs-attr">methods</span>:&#123;
	...mapActions([<span class="hljs-string">&quot;addSynic&quot;</span>])
	<span class="hljs-function"><span class="hljs-title">addHeader</span>(<span class="hljs-params"></span>)</span>&#123;
    	<span class="hljs-built_in">this</span>.addSynic(<span class="hljs-number">5</span>)
    &#125;
&#125;</code></pre>

<h4 id="getters"><a href="#getters" class="headerlink" title="getters"></a>getters</h4><blockquote>
<p>获取state的数据<br>相当于计算属性<br>在store.js配置</p>
</blockquote>
<pre><code class="hljs javascript">getters: &#123;
    <span class="hljs-function"><span class="hljs-title">showNum</span>(<span class="hljs-params">state</span>)</span> &#123;
        <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;当前最新值为【&quot;</span>+state.count+<span class="hljs-string">&quot;】&quot;</span>
    &#125;
&#125;</code></pre>
<blockquote>
<p>在组件中使用</p>
</blockquote>
<pre><code class="hljs javascript">&lt;template&gt;
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;sub&quot;</span>&gt;</span></span>
<span class="xml">      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>&#123;&#123;$store.getters.showNum&#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
<span class="xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
&lt;/template&gt;</code></pre>

<h1 id="Vue3学习笔记"><a href="#Vue3学习笔记" class="headerlink" title="Vue3学习笔记"></a>Vue3学习笔记</h1><h2 id="初识setup"><a href="#初识setup" class="headerlink" title="初识setup()"></a>初识setup()</h2><ul>
<li>vue3的一个新的配置项，是一个函数</li>
<li>里面存放属性和方法</li>
<li>setup两种返回值：对象（主）和渲染函数</li>
<li>setup不能是async函数，返回值不再是return的对象，而是promise，模板看不到return返回对象<pre><code class="hljs vue">setup()&#123;
	...属性
	...方法
	return&#123;
		...属性
		...方法
	&#125;
&#125;</code></pre></li>
</ul>
<h2 id="ref函数"><a href="#ref函数" class="headerlink" title="ref函数"></a>ref函数</h2><ul>
<li>创建一个响应式数据的reference的引用对象，const p=ref()</li>
<li>响应式是借助Object.definedproty()的set()和get()</li>
<li>接收数据类型：基本数据类型和引用数据类型</li>
<li>调用xx.value.属性</li>
</ul>
<h2 id="reactive函数"><a href="#reactive函数" class="headerlink" title="reactive函数"></a>reactive函数</h2><ul>
<li>定义一个对象类型的响应式数据</li>
<li>接收一个对象或数组，返回一个代理对象(proxy)</li>
<li>响应的数据是深层次的</li>
</ul>
<h2 id="响应式原理"><a href="#响应式原理" class="headerlink" title="响应式原理"></a>响应式原理</h2><h4 id="vue2"><a href="#vue2" class="headerlink" title="vue2"></a>vue2</h4><ul>
<li><pre><code class="hljs vue"></code></pre></li>
</ul>

    </div>
     
    <div class="post-footer__meta"><p>更新于 2022-05-30</p></div> 
    <div class="post-entry__tags"><a href="/tags/vue/" class="post-tags__link button"># vue</a><a href="/tags/%E6%8C%87%E4%BB%A4/" class="post-tags__link button"># 指令</a><a href="/tags/Vue2%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" class="post-tags__link button"># Vue2学习笔记</a></div> 
</article>


    <div class="nav">
        <div class="nav__prev">
            
                <a href="/2022/03/17/vue%E7%9F%A5%E8%AF%86%E9%93%BA%E5%9E%AB/" class="nav__link">
                    <div>
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z" fill="#808080"></path></svg>
                    </div>
                    <div>
                        <div class="nav__label">
                            <!-- Previous Post -->
                            上一页
                        </div>
                        <div class="nav__title">
                            vue知识铺垫
                        </div>
                    </div>
                </a>
            
        </div>
        <div class="nav__next">
            
                <a href="/2022/03/09/bootstrap%E5%85%A8%E5%B1%80css%E6%A0%B7%E5%BC%8F/" class="nav__link">
                    <div>
                        <div class="nav__label">
                            <!-- Next Post -->
                            下一页
                        </div>
                        <div class="nav__title">
                            bootstrap全局css样式
                        </div>
                    </div>
                    <div>
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z" fill="#808080"></path></svg>
                    </div>
                </a>
            
        </div>
    </div>



    <div class="post__comments content-card" id="comment">
        
    <h4>评论</h4>
    
    
    
    <div id="valine_container" class="valine_thread"></div>

    
    
    
    
    
    
    
    


    </div>



</main>

            <footer class="footer" style="font-size: 10px;">
     
    <a href="#" class="button" id="b2t" aria-label="回到顶部" title="回到顶部">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="32" height="32">
            <path d="M233.376 722.752L278.624 768 512 534.624 745.376 768l45.248-45.248L512 444.128zM192 352h640V288H192z" fill="currentColor"></path>
        </svg>
    </a>

    


    
    
    
        <span id="busuanzi_container_site_uv" hidden>
            <span>游客:</span>
            <span id="busuanzi_value_site_uv"></span>
            <span></span>
            
                <span> </span>
            
        </span>
    
    
        <span id="busuanzi_container_site_pv" hidden>
            <span>次数:</span>
            <span id="busuanzi_value_site_pv"></span>
            <span></span>
            
        </span>
    
 
 

 
    
    
    <p>
        <!-- Powered by <a href="https://hexo.io" target="_blank">Hexo</a> | Theme - <a href="https://github.com/ChrAlpha/hexo-theme-cards" target="_blank">Cards</a> -->
        <span style="color: black;">作者：张程</span>
    </p>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        var a_idx = 0;
            jQuery(document).ready(function($) {
                $("body").click(function(e) {
                    var a = new Array("会当凌绝顶，一览众山小", "春蚕到死丝方尽，蜡炬成灰泪始干", "夕阳无限好，只是近黄昏",
                     "位卑未敢忘忧国", "纸上得来终觉浅，绝知此事要躬行", "人生自古谁无死，留取丹心照汗青", "山重水复疑无路，柳暗花明又一村" ,
                     "小荷才露尖尖角，早有蜻蜓立上头", "床前明月光，疑是地上霜", "春色满园关不住，一枝红杏出墙来", 
                     "山际见来烟，竹中窥落日", "道狭草木长，夕露沾我衣","天长地久有时尽，此恨绵绵无绝期");
                    var color = new Array("#7B7B7B", "#CE0000", "#FF0080","#E800E8","#921AFF","#2828FF",
                    "#0072E3","#00CACA","#02DF82","#00DB00","#8CEA00","#E1E100","#EAC100","#F75000"
                    ,"#B87070","#AFAF61","#6FB7B7","#9999CC","#B766AD");
                    var $i = $("<a href='#' style='text-decoration:none'/>").text(a[a_idx]);
                    a_idx = (a_idx + 1) % a.length;
                    var x = e.pageX,
                        y = e.pageY;
                    $i.css({
                        "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                        "top": y - 20,
                        "left": x,
                        "position": "absolute",
                        "font-weight": "bold",
                        "color": color[Math.floor(Math.random()*color.length)]
                    });
                    $("body").append($i);
                    $i.animate({
                            "top": y - 180,
                            "opacity": 0
                        },
                        1500,
                        function() {
                            $i.remove();
                        });
                });
            });
        </script>
    <script>
        !function() {
            function o(w, v, i) {
                return w.getAttribute(v) || i
            }
            function j(i) {
                return document.getElementsByTagName(i)
            }
            function l() {
                var i = j("script"),
                w = i.length,
                v = i[w - 1];
                return {
                    l: w,
                    z: o(v, "zIndex", -1),
                    o: o(v, "opacity", 0.5),
                    c: o(v, "color", "0,0,0"),
                    n: o(v, "count", 99)
                }
            }
            function k() {
                r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            }
            function b() {
                e.clearRect(0, 0, r, n);
                var w = [f].concat(t);
                var x, v, A, B, z, y;
                t.forEach(function(i) {
                    i.x += i.xa,
                    i.y += i.ya,
                    i.xa *= i.x > r || i.x < 0 ? -1 : 1,
                    i.ya *= i.y > n || i.y < 0 ? -1 : 1,
                    e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
                    for (v = 0; v < w.length; v++) {
                        x = w[v];
                        if (i !== x && null !== x.x && null !== x.y) {
                            B = i.x - x.x,
                            z = i.y - x.y,
                            y = B * B + z * z;
                            y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
                        }
                    }
                    w.splice(w.indexOf(i), 1)
                }),
                m(b)
            }
            var u = document.createElement("canvas"),
            s = l(),
            c = "c_n" + s.l,
            e = u.getContext("2d"),
            r,
            n,
            m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(i) {
                window.setTimeout(i, 1000 / 45)
            },
            a = Math.random,
            f = {
                x: null,
                y: null,
                max: 20000
            };
            u.id = c;
            u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
            j("body")[0].appendChild(u);
            k(),
            window.onresize = k;
            window.onmousemove = function(i) {
                i = i || window.event,
                f.x = i.clientX,
                f.y = i.clientY
            },
            window.onmouseout = function() {
                f.x = null,
                f.y = null
            };
            for (var t = [], p = 0; s.n > p; p++) {
                var h = a() * r,
                g = a() * n,
                q = 2 * a() - 1,
                d = 2 * a() - 1;
                t.push({
                    x: h,
                    y: g,
                    xa: q,
                    ya: d,
                    max: 6000
                })
            }
            setTimeout(function() {
                b()
            }, 100)
    } ();
    </script>
</footer>

        </div>
        
    <script defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.0/dist/lazyload.min.js"></script>
    <script>
        window.lazyLoadOptions = {
            elements_selector: ".lazy",
            threshold: 0
        };
    </script>
 

 

 

 

 



 



 


    
 


    
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.4.1/dist/jquery.fancybox.min.css">

    
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.4.1/dist/jquery.fancybox.min.js"></script>

    <script>
        let lazyloadT = Boolean('true'),
            auto_fancybox = Boolean('false')
        if (auto_fancybox) {
            $(".post__content").find('img').each(function () {
                var element = document.createElement("a");
                $(element).attr("data-fancybox", "gallery");
                $(element).attr("href", $(this).attr("src"));
                if (lazyloadT) {
                    $(element).attr("href", $(this).attr("data-srcset"));
                }
                $(this).wrap(element);
            });
        } else {
            $(".post__content").find("fancybox").find('img').each(function () {
                var element = document.createElement("a");
                $(element).attr("data-fancybox", "gallery");
                $(element).attr("href", $(this).attr("src"));
                if (lazyloadT) {
                    $(element).attr("href", $(this).attr("data-srcset"));
                }
                $(this).wrap(element);
            });
        }
    </script>
 

 

 

 

 


    

    
    
    
    <script>
        function loadComment() {
            let e;
            (e = document.createElement("script")).src = 'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js',
            document.body.appendChild(e);
            e.onload = () => {
                var valineConfig = {"appId":"c21JqSBfScFdueO44Scwp9Ba-gzGzoHsz","appKey":"apETP0QIekHzRXjTHvOnrQmS","placeholder":null,"path":null,"avatar":"retro","meta":["nick","mail","link"],"pageSize":null,"lang":null,"visitor":null,"highlight":null,"avatarForce":null,"recordIP":null,"serverURLs":null,"enableQQ":true,"requiredFields":["nick","mail"],"emojiCDN":null,"emojiMaps":null};
                valineConfig.el = '#valine_container';
                for (var i in valineConfig) {
                    if (valineConfig[i] === null) delete valineConfig[i];
                }
                new Valine(valineConfig);
            };
        }
    
        var runningOnBrowser = typeof window !== "undefined";
        var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
        var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
    
        setTimeout(function () {
            if (!isBot && supportsIntersectionObserver) {
                var comment_observer = new IntersectionObserver(function(entries) {
                    if (entries[0].isIntersecting) {
                        loadComment();
                        comment_observer.disconnect();
                    }
                }, { threshold: [0] });
                comment_observer.observe(document.getElementById('comment'));
            } else {
                loadComment();
            }
        }, 1);
    </script>


    
    
    
    
    

    
    
    
    
    

    
    
    



    </body>
</html>
